<template>
  <div class="table-scope">
    <Table stripe ref="selection" :columns="columns" :data="data" :height="height" :loading="loading" @on-selection-change="handleSelect">
      <!-- 头像 -->
      <template v-if="row.avatar" slot-scope="{ row }" slot="avatar">
          <!-- <img
            :src="row.avatar"
            class="avatar"
          > -->
          <Avatar :src="row.avatar" shape="square" icon="ios-person" />
      </template>

      <!-- 图片 -->
      <template v-if="row.image" slot-scope="{ row }" slot="image">
          <img
            :src="row.image"
            class="image"
          >
      </template>

      <!-- 时间 -->
      <template v-if="row.time" slot-scope="{ row }" slot="time">
          <img
            :src="row.time"
            class="time"
          >
      </template>

      <!-- 图文 -->
      <template v-if="row.picture_text" slot-scope="{ row }" slot="picture_text">
          <img
            :src="row.picture_text"
            class="picture_text"
          >
      </template>

      <!-- 描述文本 -->
      <template v-if="row.desc" slot-scope="{ row }" slot="desc">
        <Poptip word-wrap width="200" trigger="hover">
          <span slot="content">{{ row.desc }}</span>
            {{ row.desc.substring(0,30) + '……'}}
        </Poptip>
      </template>

    </Table>
    <div class="pageArea">
      <Page :total="total" show-sizer @on-change="handleChange" @on-page-size-change="handlePageSizeChange" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      }
    },
    loadingT: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    total: {
      type: Number,
      default: 0
    }
  },
  watch: {
    // 当父组件该数据发生变化，子组件需要监听其变化重新赋值
    tableData: {
      handler(newVal, oldVal) {
        this.data = newVal;
        this.loading = false;
      },
      deep: true,
      immediate: true
    },
    total: {
      handler(newVal, oldVal) {
        this.total = newVal;
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      data: this.tableData,
      height: 'calc(100vh - 200px)',
      loading: this.loadingT,
      selectList: []
    };
  },
  methods: {
    handleChange(page) {
      this.$emit('handle-change', page);
    },
    handlePageSizeChange(pageSize) {
      this.$emit('handle-page-size-change', pageSize);
    },
    handleSelect(row) {
      this.selectList = [];
      for (let i in row) {
        this.selectList.push(row[i].id);
      }
      console.log('aaaaaaaaaaaaaaaaaaaaaaaaa', row, this.selectList);
      this.$emit('handle-select', this.selectList);
    }
  }
};
</script>
<style lang="scss" scoped>
.table-scope{
  margin: 0 0.2rem;
  border: 1px solid #e8eaec;
}
.avatar{
  width: 2.5rem;
  height: 2.5rem;
}
/deep/.ivu-table-cell .ivu-table-cell-slot{
  display: flex;
  align-items: center;
}
.pageArea{
  margin: 1.25rem 0;
  text-align: right;
}
</style>
